<template>
    <div class="bigBox" v-show="!showDetail">
        <div class="typeList">
            <div class="allTypes" ref="allTypes">
                <div v-for="(item, index) in types" :class="{ allTypeItem: true, active: activeTypeIndex == index }"
                    @click="selectChild(item.children, index)">
                    {{ item.label }}
                </div>
            </div>
            <div class="detailTypes" ref="detailTypes">
                <div class="detailTypeItem">
                    <div v-for="item in typeChild" :class="{ item: true, active: activeDetailType == item.value }"
                        @click="selectType(item.value)">
                        {{ item.label }}
                    </div>
                </div>
                <div class="back" @click="backAllTypes">
                    <el-icon class="icon">
                        <Back />
                    </el-icon>
                </div>
            </div>
        </div>
        <div class="Imgs" ref="Imgs">
            <ImgList :imgList="imgLists" @viewPicture="viewPicture" :loading="loading"></ImgList>
        </div>
    </div>
    <Detail v-if="showDetail" @closePicture="closePicture" :urls="imgLists" :index="showIndex">
    </Detail>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue'
import ImgList from '@renderer/components/imgList.vue'
import Detail from '@renderer/components/detail.vue'
import _ from 'lodash'
import { types } from './searchType'
import MhHooks from './index'
import { Back } from '@element-plus/icons-vue'

const { loading, showDetail, imgLists, Imgs, showIndex, typeChild, activeTypeIndex, activeDetailType,
    allTypes, detailTypes, getImgList, scrollEvent, viewPicture, closePicture, selectChild, selectType, backAllTypes } = MhHooks()



//所以渲染进程监听修改事件,调用修改方法
onMounted(() => {
    getImgList('img1')
    Imgs.value?.addEventListener('scroll', scrollEvent)
})
onBeforeUnmount(() => {
    Imgs.value?.removeEventListener('scroll', scrollEvent)
})
</script>

<style scoped lang="scss">
.bigBox {
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    padding: 5px;


    .typeList {
        user-select: none;
        height: 100vh;
        width: 100%;
        position: relative;
        overflow: hidden;
        @include mixin.box_shadow();

        .allTypes {
            width: 100%;
            height: 100vh;
            overflow-y: auto;
            @include mixin.scroll_bar();
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            transition: all 0.3s;

            .allTypeItem {
                text-align: center;
                padding: 5px 0;
                cursor: pointer;
                border-radius: $boxRadius;

                &:hover {
                    color: $primary;
                }
            }

            .active {
                background-color: $selectBack;
                color: $primary;
            }
        }

        .detailTypes {
            width: 100%;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 100%;
            z-index: 100;
            display: flex;
            flex-direction: column;
            transition: all 0.3s;

            .detailTypeItem {
                flex: 1;
                overflow-y: auto;
                @include mixin.scroll_bar();

                .item {
                    text-align: center;
                    padding: 5px;
                    cursor: pointer;

                    &:hover {
                        color: $primary;
                    }
                }
            }

            .active {
                border-radius: $boxRadius;
                background-color: $selectBack;
                color: $primary;
            }

            .back {
                padding: 5px 10px;
                cursor: pointer;
                text-align: center;

                .icon {
                    font-size: 23px;
                    color: var(--text);
                }
            }
        }
    }

    .Imgs {
        height: 100vh;
        @include mixin.scroll_bar();
    }
}
</style>